<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>新闻页面</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="render/css/frontend/common/base.css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css"/>
    <link rel="stylesheet" href="render/css/frontend/slider.css"/>
    <link rel="stylesheet" href="render/css/frontend/shop.css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_manager.css" type="text/css"/>
<%--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css"/>--%>
    <link rel="stylesheet" href="render/css/font-awesome.min.css" type="text/css"/>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
    <script type="text/javascript" src="render/js/slider.js"></script>

    <style type="text/css">
        .news_title {
            width: 1000px;
            margin: 10px auto 0px;
            display: block;
            /* font-size: 18px; */
            padding: 10px;
            /* text-align: center; */
        }
        .news_title_top_description{
            /* float: left; */
            font-size: 16px;
            color: #f16d02;
            background: #f5f5f5;
            /* margin-bottom: 20px; */
            /*border-bottom: 1px solid #eaecef;*/
        }
        .news_title_top_time{
            text-align: right;
            color: green;
            border-bottom: 1px solid #eaecef;
        }
        .news_title_top_title{
            font-size: 21px;
            text-align: center;
        }
        .news_title span {
            display: block;
            width: 100%;
            padding-bottom: 12px;
        }
        .pointer {
            cursor: pointer !important;
        }
        i {
            margin: auto 3px;
        }
        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            font-family: 'Microsoft YaHei';
            font-weight: 700;
            /* color: #333; */
        }
        #article-menu {
            display: none;
            /*overflow-y: scroll;*/
            max-height: 500px;
        }
        #article-menu ul {
            list-style-type: none;
            -webkit-padding-start: 0;
        }
        #article-menu > ul > li:hover, #article-menu > ul > li.active {
            color: #fce53e;
            background: #f3f3f3;
            border-left: 2px solid #fce53e;
            -moz-transition: all .2s ease;
            -o-transition: all .2s ease;
            -webkit-transition: all .2s ease;
            transition: all .2s ease;
        }
        #article-menu ul li {
            line-height: 1.5;
            white-space: nowrap;
            word-wrap: normal;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        #article-menu > ul > li:hover > a, #article-menu > ul > li.active > a {
            color: #fca334;
        }
        #article-menu > ul > li > a {
            display: block;
            padding: 3px 0;
            color: #000;
        }
        a:-webkit-any-link {
            cursor: pointer;
            text-decoration: none;
        }
        i {
            margin: auto 3px;
        }
    </style>

    <style type="text/css">
        .article-module, .navbar {
            transition: width 0.5s, top 0.5s ease, -webkit-transform 0.5s linear;
            -moz-transition: width 0.5s, top 0.5s ease, -webkit-transform 0.5s linear;
            -webkit-transition: width 0.5s, top 0.5s ease, -webkit-transform 0.5s linear;
            -o-transition: width 0.5s, top 0.5s ease, -webkit-transform 0.5s linear;
            z-index: 105;
        }
        .sidebar-module {
            z-index: 10;
            padding: 1px 10px 15px 10px;
            border: 1px solid #eaecef;
            line-height: 25px;
            /* margin: 0 0 10px 0; */
            background: #fff;
            /*border-radius: 4px;*/
            position: fixed;
            width: 22.3333%;
            top: 80px;
            right: 38px;
        }
        .custom-title {
            margin-bottom: 0.6rem;
            margin-bottom: .5rem;
            /* padding-bottom: .6rem; */
            border-bottom: .05rem solid #eee;
            overflow: initial !important;
        }
        .icon {
            float: left;
            width: 30px;
            font-size: 16px;
            /* color: #2f889a; */
            line-height: 18px;
            text-align: center;
            margin: 6px 8px 3px -5px;
            border-right: 1px solid #ddd;
            border-radius: 2px 0 0 0;
            padding: 0.2rem;
        }
        strong.text_title {
            /*padding: 10px 8px 3px -5px;*/
            line-height: 35px;
        }
        .pull-right{
            margin: 0.7em 0.2em 1em 1em !important;
        }

        .hide{
            display: none;
        }

        .shop_member_bd.clearfix.blog-info-body p {
            line-height: 28px;
        }
    </style>
</head>
<body>

<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="render/news/queryNewsByNewsId?news_id=${news.id}">${news.title}</a>
    </span>
</div>

<div class="clear"></div>

<div class="news_title">
    <span class="news_title_top_title">${news.title}</span>
    <br>
    <span class="news_title_top_time">
        <i class="fa fa-eye fa-fw"></i>浏览(${news.looks})&nbsp;&nbsp;&nbsp;<fmt:formatDate type="both" dateStyle="long" timeStyle="long" value="${news.create_time}" />
    </span>
    <br>
    <span class="news_title_top_description">
        <i class="fa fa-quote-left fa-fw"></i>
        <p style="margin-left: 15px; color: #fca334; font-weight: bold; padding: 10px 10px 3px 10px;">${news.description}</p>
    </span><br>
</div>

<div class="shop_member_bd clearfix blog-info-body">
    ${content}
</div>

<div class="sidebar-module article-module hide" style="top: 0; display:none;">
    <h5 class="custom-title">
        <i class="fa fa-book fa-fw icon"></i>
        <strong class="text_title" style="font-weight: 700;">本文目录</strong>
        <i class="fa fa-close pull-right close-article-menu hide pointer"></i>
        <small></small>
    </h5>
    <div id="article-menu">
        <ul class="list-unstyled"></ul>
    </div>
</div>

<jsp:include page="common/footer.jsp"></jsp:include>

</body>
<%--<link rel="stylesheet" href="render/css/frontend/HFAlert.css">--%>
<script type="text/javascript">
    function setTab(m, n) {
        var tli = document.getElementById("menu6").getElementsByTagName("li");
        var mul = getChildNodes('main6', 'UL');
        // var mul = document.getElementById("main6").getElementsByTagName("ul");
        for (var i = 0; i < tli.length; i++) {
            var flagTli = (i == n) ? "hover" : "outer";
            tli[i].setAttribute('class', flagTli);
            var flagMul = (i == n) ? "block" : "none";
            // console.log("i="+i);
            mul[i].style.display=flagMul;
        }
    }

    function getChildNodes(node, tagName) {
        if (typeof node == 'string') {
            node = document.getElementById(node);
        }
        var nodes = [];
        for (var i = 0, j = node.childNodes.length; i < j; i++){
            if (node.childNodes[i].nodeType == 1) {
                if (node.childNodes[i].tagName == tagName) {
                    nodes.push(node.childNodes[i]);
                    // console.log("node.childNodes[i]=" + node.childNodes[i])
                }
                // else{
                //     console.log("node.childNodes[i].tagName="+node.childNodes[i].tagName)
                // }
            }
        }
        return nodes;
    }
</script>

<script type="text/javascript">
    function initArticeMenu() {
        $(function () {
            var $blogContentBody = $('.blog-info-body');
            var $h = $blogContentBody.find('h2, h3');
            var $articleBox = $('.article-module');
            var $articleMenu = $('#article-menu');
            if ($blogContentBody && $blogContentBody[0]) {
                var padding = [0, 10, 20, 30, 40];
                var liDom, aDom;
                var hasMenu = false;

                // 目录导航定位
                $(window).scroll(function () {
                    var top = $(document).scrollTop();
                    var currentId = ""; //滚动条现在所在位置的item id
                    $h.each(function () {
                        var $this = $(this);
                        //注意：$this.offset().top代表每一个item的顶部位置
                        if (top > $this.offset().top - 200) {
                            currentId = "#" + $this.prev().attr("id");
                        } else {
                            return false;
                        }
                    });

                    var currentLink = $articleMenu.find(".active");
                    // console.log("11111111");
                    if (currentId && currentLink.attr("href") != currentId) {
                        currentLink.removeClass("active");
                        // console.log("222222");
                        $articleMenu.find("[href*=\\" + currentId + "]").parent().addClass("active");
                    }
                });
                // 生成目录
                $h.each(function (index) {
                    var $this = $(this);
                    var tagText = $this.text().trim();
                    var tagName = $this[0].tagName.toLowerCase();
                    var tagIndex = parseInt(tagName.charAt(1)) - 1;

                    $this.addClass("menu-title").before($('<span id="menu_' + index + '" class="menu-point"></span>'));
                    aDom = '<a href=render\\news\\queryNewsByNewsId?news_id='+'${news.id}'+'#menu_' + index + ' style="display:inline-block;"><i class="fa fa-caret-right"></i>' + '  ' + tagText + '</a>';
                    liDom = '<li style="padding-left:' + padding[tagIndex] + 'px;">' + aDom + '</li>';
                    $articleMenu.find("ul").append(liDom);
                    hasMenu = true;
                });
                if (hasMenu) {
                    $articleMenu.show();
                    $articleBox.removeClass('hide');
                    // bindMenuScroll(),
                    $(window).scroll(function () {
                        bindMenuScroll();
                    });

                    function bindMenuScroll() {
                        $articleBox.css('display', ($(window).width() < 768) ? 'none' : 'block');
                        if($(window).width() < 768) {
                            return false;
                        }
                        // if ($.tool.currentPath().indexOf('/article/') !== -1) {
                            if ($(document).scrollTop() >= 200) {
                                if (!$articleBox.hasClass("fixed")) {
                                    $articleBox.addClass('fixed').css({
                                        width: '22.3333%'
                                    }).animate({top: '80px'}, 100);
                                    $('.close-article-menu').removeClass('hide');
                                }
                            } else {
                                // $articleBox.removeClass('fixed').removeAttr('style');
                                $articleBox.removeClass('fixed').css({
                                    display: 'none'
                                }).animate({top: '80px'}, 100);
                                // $articleBox.css("display","none");
                                // $('.close-article-menu').removeClass('hide');
                            }
                        // }
                    }

                    $('.close-article-menu').on('click', function () {
                        // console.log("111111");
                        $articleBox.css("display","none");
                    });
                }
            }
        });
    }

    function initScrollMenu() {
        var topmenu = $("#topmenu"); //得到导航对象
        var mainmenu = $("#mainmenu"); //得到导航对象
        var win = $(window); //得到窗口对象
        var sc = $(document);//得到document文档对象。
        var am = $(".article-module");// 文章目录对象
        bindScroll();
        win.scroll(function () {
            bindScroll();
        });

        //滚动超过一定范围，头部就置顶
        function bindScroll() {
            if (sc.scrollTop() >= 100) {
                if (!mainmenu.hasClass("transparent")) {
                    topmenu.animate({opacity: '0'}, 0);
                    mainmenu.addClass('transparent');
                    if (win.width() > 768) {
                        mainmenu.animate({top: '0', 'z-index': 1000}, 1);
                    }
                }
            } else {
                topmenu.animate({opacity: '1'}, 0);
                mainmenu.removeClass('transparent');
                if (win.width() > 768) {
                    mainmenu.animate({top: '30', 'z-index': 998}, 1);
                }
            }
        }
    }

    // initArticeMenu();
    // initScrollMenu();
</script>
</html>